@import "../../../styles/colors.less";

page {
  height: 100%;
  background-color: #f8f7fa;

  .task-list {
    box-sizing: border-box;
    padding: 60px 56px;

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 40rpx;
      color: #000;
      margin-bottom: 34px;

      .all-task-list-btn {
        font-size: 30rpx;
        text-decoration: underline;
      }
    }

    .unfinished-task-list,
    .unfinished-once-task-list {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;

      .task-card {
        margin-bottom: 48px;

        .title {
          font-size: 40rpx;
          white-space: nowrap;
        }
      }
    }

    .finished-task {
      display: flex;
      justify-content: space-between;
      background-color: #91c788;
      color: #fff;
      border: 1px solid #91c788;
      box-sizing: border-box;
      border-radius: 30px;
      padding: 20px 20px 20px 50px;
      margin-bottom: 36px;

      .at-icon.at-icon-check-circle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
      }
    }

    // TODO: 打卡任务内容组件抽取
    .at-modal__container {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 640px;
      height: 890px;
      background-color: #fff;
      border-radius: 16px;
      padding: 80px 72px 60px;
      box-sizing: border-box;

      .task-dialog-content {
       
        .task-modal-image {
          margin-top: 24px;
          width: 430px;
          height: 430px;
          border-radius: 50%;
          display: block;
          z-index: 0;
        }

        .title {
          display: block;
          font-size: 60px;
          text-align: center;
          margin-bottom: 20px;
        }

        .point {
          display: block;
          font-size: 26px;
          text-align: center;
        }
      }

      .complete-btn {
        height: 80px;
        line-height: 80px;
        border-radius: 30px;
        background-color: #6c63ff;
        color: #fff;
      }
    }
  }
}
